<template>
	<view class="container">
		<view class="header">
			<text class="title">刮刮乐</text>
			<text class="subtitle">剩余刮奖次数：{{chances}}次</text>
		</view>
		
		<view class="scratch-container">
			<view class="scratch-card" v-for="(card, index) in scratchCards" :key="index">
				<view class="card-front">
					<image :src="card.prize.icon" mode="aspectFit" class="prize-icon"></image>
					<text class="prize-name">{{card.prize.name}}</text>
					<text class="prize-value">{{card.prize.value}}</text>
				</view>
				<view class="card-back" :class="{ 'scratched': card.scratched }">
					<canvas canvas-id="scratchCanvas" class="scratch-canvas"
						@touchstart="touchStart($event, index)"
						@touchmove="touchMove($event, index)"
						@touchend="touchEnd($event, index)"></canvas>
				</view>
			</view>
		</view>
		
		<view class="rules">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每人每天有3次刮奖机会</text>
				<text>2. 刮开涂层即可看到奖品</text>
				<text>3. 中奖后请及时领取奖品</text>
				<text>4. 奖品将在24小时内发放</text>
			</view>
		</view>
		
		<view class="my-prizes" v-if="myPrizes.length > 0">
			<text class="prizes-title">我的奖品</text>
			<view class="prizes-list">
				<view class="prize-item" v-for="(prize, index) in myPrizes" :key="index">
					<image :src="prize.icon" mode="aspectFit" class="prize-icon"></image>
					<view class="prize-info">
						<text class="prize-name">{{prize.name}}</text>
						<text class="prize-value">{{prize.value}}</text>
					</view>
					<text class="prize-status" :class="prize.status">{{prize.statusText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 奖品配置
const prizes = [
	{ name: '50元红包', value: '50元', icon: '/static/images/games/prize-50.png' },
	{ name: '30元红包', value: '30元', icon: '/static/images/games/prize-30.png' },
	{ name: '20元红包', value: '20元', icon: '/static/images/games/prize-20.png' },
	{ name: '10元红包', value: '10元', icon: '/static/images/games/prize-10.png' },
	{ name: '5元红包', value: '5元', icon: '/static/images/games/prize-5.png' },
	{ name: '谢谢参与', value: '0元', icon: '/static/images/games/prize-0.png' }
]

// 刮刮卡数据
const scratchCards = ref([
	{ scratched: false, prize: null },
	{ scratched: false, prize: null },
	{ scratched: false, prize: null }
])

// 我的奖品
const myPrizes = ref([
	{
		name: '50元红包',
		value: '50元',
		icon: '/static/images/games/prize-50.png',
		status: 'pending',
		statusText: '待领取'
	},
	{
		name: '20元红包',
		value: '20元',
		icon: '/static/images/games/prize-20.png',
		status: 'received',
		statusText: '已领取'
	}
])

// 游戏相关
const chances = ref(3)
const currentCard = ref(null)
const ctx = ref(null)
const isScratching = ref(false)

// 初始化刮刮卡
const initScratchCard = (index) => {
	const card = scratchCards.value[index]
	if (!card.prize) {
		const prizeIndex = Math.floor(Math.random() * prizes.length)
		card.prize = prizes[prizeIndex]
	}
	
	const query = uni.createSelectorQuery()
	query.select(`#scratchCanvas${index}`).boundingClientRect()
	query.exec((res) => {
		const canvas = res[0]
		ctx.value = uni.createCanvasContext(`scratchCanvas${index}`)
		
		// 绘制灰色背景
		ctx.value.setFillStyle('#CCCCCC')
		ctx.value.fillRect(0, 0, canvas.width, canvas.height)
		
		// 绘制网格
		ctx.value.setStrokeStyle('#FFFFFF')
		ctx.value.setLineWidth(1)
		for (let i = 0; i < canvas.width; i += 20) {
			ctx.value.moveTo(i, 0)
			ctx.value.lineTo(i, canvas.height)
		}
		for (let i = 0; i < canvas.height; i += 20) {
			ctx.value.moveTo(0, i)
			ctx.value.lineTo(canvas.width, i)
		}
		ctx.value.stroke()
		
		ctx.value.draw()
	})
}

// 触摸开始
const touchStart = (e, index) => {
	if (scratchCards.value[index].scratched || chances.value <= 0) return
	
	isScratching.value = true
	currentCard.value = index
	chances.value--
	
	const touch = e.touches[0]
	scratch(touch.x, touch.y)
}

// 触摸移动
const touchMove = (e, index) => {
	if (!isScratching.value || currentCard.value !== index) return
	
	const touch = e.touches[0]
	scratch(touch.x, touch.y)
}

// 触摸结束
const touchEnd = (e, index) => {
	if (!isScratching.value || currentCard.value !== index) return
	
	isScratching.value = false
	currentCard.value = null
	
	// 检查是否刮开足够面积
	const card = scratchCards.value[index]
	if (card.scratched && !card.prize) {
		const prizeIndex = Math.floor(Math.random() * prizes.length)
		card.prize = prizes[prizeIndex]
		
		// 添加到我的奖品
		myPrizes.value.unshift({
			...prizes[prizeIndex],
			status: 'pending',
			statusText: '待领取'
		})
		
		// 显示中奖信息
		uni.showModal({
			title: '恭喜中奖',
			content: `您获得了${prizes[prizeIndex].name}`,
			showCancel: false
		})
	}
}

// 刮开涂层
const scratch = (x, y) => {
	if (!ctx.value) return
	
	ctx.value.setFillStyle('#FFFFFF')
	ctx.value.beginPath()
	ctx.value.arc(x, y, 20, 0, 2 * Math.PI)
	ctx.value.fill()
	ctx.value.draw()
}

// 页面加载时获取数据
onMounted(() => {
	// TODO: 从服务器获取刮奖次数和我的奖品
	scratchCards.value.forEach((_, index) => {
		initScratchCard(index)
	})
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.scratch-container {
	padding: 40rpx 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.scratch-card {
	width: 600rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
	position: relative;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.card-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	box-sizing: border-box;
}

.prize-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
}

.prize-value {
	font-size: 24rpx;
	color: #D02B29;
}

.card-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.scratch-canvas {
	width: 100%;
	height: 100%;
}

.card-back.scratched {
	opacity: 0;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}

.my-prizes {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.prizes-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.prize-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize-item:last-child {
	border-bottom: none;
}

.prize-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.prize-info {
	flex: 1;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

.prize-value {
	font-size: 24rpx;
	color: #D02B29;
}

.prize-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.prize-status.pending {
	color: #D02B29;
	background-color: #FFE4E4;
}

.prize-status.received {
	color: #999;
	background-color: #F5F5F5;
}
</style> 